<template>
  <view class="setting-container">
    <!-- 顶部自定义导航栏 -->
    <view class="nav-bar" :style="navBarStyle">
      <view class="back-btn" @tap="goBack">
        <!-- 你可以用 uni-icons，也可以继续用 iconfont -->
        <uni-icons type="left" size="32" color="#333" />
      </view>
      <view class="nav-title">设置</view>
    </view>

    <!-- 主体内容区，从 nav-bar 下方开始显示 -->
    <scroll-view class="page-body" scroll-y>
      <!-- 把原来的 menu-list、logout 等放这里 -->
      <view class="menu-list">
        <!-- … -->
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    const info = uni.getSystemInfoSync()
    const statusBar = info.statusBarHeight  // 状态栏高度，px
    // 88rpx 大约是 44px，高度可以根据你项目需求微调
    const navHeight = statusBar + 44        
    return {
      statusBar,
      navHeight
    }
  },
  computed: {
    // 用内联样式动态注入安全区 padding
    navBarStyle() {
      return {
        paddingTop: this.statusBar + 'px',
        height: this.navHeight + 'px'
      }
    }
  },
  methods: {
    goBack() {
      console.log('tap 事件触发了，切换到工作台 Tab')
      uni.switchTab({
        url: '/pages/work/index',
        success() { console.log('switchTab 成功') },
        fail(e) { console.error('switchTab 失败', e) }
      })
    }
    // … 其它方法 …
  }
}
</script>

<style scoped>
.setting-container {
  position: relative;
  width: 100%; height: 100vh;
  background: #f8f8f8;
}
/* 导航栏固定在顶部 */
.nav-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  background: #fff;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
  z-index: 10;
}
/* 返回按钮区域 */
.back-btn {
  width: 60rpx; height: 60rpx;
  display: flex; align-items: center; justify-content: center;
}
/* 标题居中 */
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  color: #333;
}
/* 内容区从导航栏下方开始 */
.page-body {
  position: absolute;
  top: calc(var(--nav-height) * 1px); /* 不支持 CSS 变量？直接用 inline style */
  bottom: 0; left: 0; right: 0;
  background: #f8f8f8;
}
</style>
